import { Form, Input, Space, Button, Checkbox } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { reg } from '@/utils/reg';
import { Link, history } from 'umi';
import { useLocalStorageState, useRequest } from 'ahooks';
import { loginPass } from '@/api/login';
import { ShowFail } from '@/utils/message';
import { useEffect } from 'react';
import './pass.scss'
export const LoginPass = () => {
    // 表单form
    const [form] = Form.useForm()
    // localStorage
    const [calPassword, setCalPassword] = useLocalStorageState<string | null>(
        'calPassword'
    )
    const [calAccount, setCalAccount] = useLocalStorageState<string | null>(
        'calAccount'
    )
    const [calToken, setCalToken] = useLocalStorageState<string | null>(
        'calToken'
    )
    const [calremember, setCalremember] = useLocalStorageState<string | null>(
        'calremember'
    )
    const layout = {
        labelCol: {
            span: 6
        },
        wrapperCol: {
            span: 18
        }
    }
    const LoginApi = useRequest(loginPass, {
        manual: true,
        onSuccess: (res:loginUsers, params) => {
            if (res.code == 200) {
                setCalToken(res.token)
                setCalAccount(res.result.username)
                if (form.getFieldValue('remember')) {
                    setCalPassword(res.result.password)
                    setCalremember(form.getFieldValue('remember'))
                } else {
                    setCalremember(form.getFieldValue('remember'))
                }
                history.push('/admin')
            }
        }
    })
    const itemLayout = {
        wrapperCol: {
            span: 21,
            offset: 2
        }
    }
    const itemLayoutTwo = {
        wrapperCol: {
            span: 23,
            offset: 1
        }
    }
    const submitForm = () => {
        form.validateFields()
            .then((res: loginPass) => {
                LoginApi.run(res.account, res.password)
                
            })
            .catch(err => {
                ShowFail('校验失败')
            })
    }
    useEffect(() => {
        if (calremember) {
            form.setFieldValue('account', calAccount)
            form.setFieldValue('password', calPassword)
            form.setFieldValue('remember', calremember)

        }
    }, [])
    return (
        <div>
            <Form
                form={form}
                {...layout}
                name="normal_login"
                className="login-form"
            >
                <Form.Item
                    name="account"
                    label="用户账号"
                    rules={[{ required: true, message: '用户账号不能为空' }]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} allowClear autoComplete='true' placeholder="请输入" />
                </Form.Item>
                <Form.Item
                    name="password"
                    label="登录密码"
                    rules={[
                        { required: true, message: '密码不能为空' },
                        {
                            pattern: reg.pwd,
                            message: '密码格式不正确'
                        }
                    ]}
                >
                    <Input.Password
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="请输入"
                        allowClear
                    />
                </Form.Item>
                <Form.Item {...itemLayoutTwo} >
                    <Space style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <div className="checkbox-wrapper-12"  style={{display:'flex'}}>
                                <div className="cbx">
                                    <input id="cbx-12" type="checkbox" />
                                        <label htmlFor="cbx-12"></label>
                                        <svg width="15" height="14" viewBox="0 0 15 14" fill="none">
                                            <path d="M2 8.36364L6.23077 12L13 2"></path>
                                        </svg>
                                   
                                </div>

                                <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                                    <defs>
                                        <filter id="goo-12">
                                            <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur"></feGaussianBlur>
                                            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -7" result="goo-12"></feColorMatrix>
                                            <feBlend in="SourceGraphic" in2="goo-12"></feBlend>
                                        </filter>
                                    </defs>
                                </svg>
                                <span style={{marginLeft:'5px'}}>记住密码</span>

                            </div>
                        </Form.Item>

                        <Link className="login-form-forgot" style={{ color: '#f50' }} to="/findpass" >
                            找回密码
                        </Link>
                    </Space>
                </Form.Item>

                <Form.Item {...itemLayout}>
                    {/* <Button type="primary" block onClick={submitForm} className="login-form-button">
                        登陆
                    </Button> */}
                    <button style={{ display: 'block', width: '100%', height: '32px' }}  className='two' onClick={submitForm}>
                        <span>登录</span>

                        <div className="star-1">
                            <svg xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style={{ shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality" as any, fillRule: "evenodd", clipRule: "evenodd" }} version="1.1" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" className="fil0"></path></g></svg>
                        </div>
                        <div className="star-2">
                            <svg xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style={{ shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality" as any, fillRule: "evenodd", clipRule: "evenodd" }} version="1.1" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" className="fil0"></path></g></svg>
                        </div>
                        <div className="star-3">
                            <svg xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style={{ shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality" as any, fillRule: "evenodd", clipRule: "evenodd" }} version="1.1" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" className="fil0"></path></g></svg>
                        </div>
                        <div className="star-4">
                            <svg xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style={{ shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality" as any, fillRule: "evenodd", clipRule: "evenodd" }} version="1.1" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" className="fil0"></path></g></svg>
                        </div>
                        <div className="star-5">
                            <svg xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style={{ shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality" as any, fillRule: "evenodd", clipRule: "evenodd" }} version="1.1" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" className="fil0"></path></g></svg>
                        </div>
                        <div className="star-6">
                            <svg xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style={{ shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality" as any, fillRule: "evenodd", clipRule: "evenodd" }} version="1.1" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" className="fil0"></path></g></svg>
                        </div>
                    </button>
                    <button style={{ display: 'block', width: '100%', height: '32px' ,marginTop:'10px'}} className='two'  onClick={()=>form.resetFields()}>
                        <span>重置</span>

                        <div className="star-1">
                            <svg xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style={{ shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality" as any, fillRule: "evenodd", clipRule: "evenodd" }} version="1.1" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" className="fil0"></path></g></svg>
                        </div>
                        <div className="star-2">
                            <svg xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style={{ shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality" as any, fillRule: "evenodd", clipRule: "evenodd" }} version="1.1" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" className="fil0"></path></g></svg>
                        </div>
                        <div className="star-3">
                            <svg xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style={{ shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality" as any, fillRule: "evenodd", clipRule: "evenodd" }} version="1.1" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" className="fil0"></path></g></svg>
                        </div>
                        <div className="star-4">
                            <svg xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style={{ shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality" as any, fillRule: "evenodd", clipRule: "evenodd" }} version="1.1" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" className="fil0"></path></g></svg>
                        </div>
                        <div className="star-5">
                            <svg xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style={{ shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality" as any, fillRule: "evenodd", clipRule: "evenodd" }} version="1.1" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" className="fil0"></path></g></svg>
                        </div>
                        <div className="star-6">
                            <svg xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style={{ shapeRendering: "geometricPrecision", textRendering: "geometricPrecision", imageRendering: "optimizeQuality" as any, fillRule: "evenodd", clipRule: "evenodd" }} version="1.1" xmlSpace="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z" className="fil0"></path></g></svg>
                        </div>
                    </button>
                </Form.Item>
            </Form>
        </div>
    )
}